{% extends 'base.html' %}

{% block body %}

<p class='title' style='margin-top: 0px; margin-bottom: -10px;'>
    Albums
</p>


<div class="container maxWidth" style='background: rgb(28,28,30);margin-top: -12px;'>
    <table class="table-album table-dark justify-content space-between">
        <tbody style='width:100%;'>


          {% for album in user_saved_albums %}

              <tr style="height:200px; width: 100%; border: 0px solid #fff !important; margin-top: -50px;" >
                <th scope="row" style='padding: 0px;border: 0px solid #fff !important; width:20%;'> 
                  <div class="image-shadow-prev-album cursor-pointer-all-obj" style="background-image:url({{album.alb_image}})" ></div>
                </th>
                <td>
                  <div class='alb-info-list'>
                    <a class='no-link' href="{{ url_for('artist', uri=album.art_id)}}"><p class='alb-artist cursor-pointer-all-obj'><i class="far fa-user"></i> {{album.art_name}}</p></a>
                    <a class='no-link' href="{{ url_for('album', uri=album.alb_id)}}"><p class='alb-name cursor-pointer-all-obj'>{{album.alb_name}}</p></a>

                  <p class='alb-butt'>
                     <a class='no-link download-link' href="{{ url_for('listenOnSpotifyAlbum', uri=album.alb_id)}}">
                      <span class="btn btn-outline-success download-button" style='padding: 2px 2px 2px 2px;border: 0px solid #fff;'>
                        <i class="fab fa-spotify"></i> Listen on Spotify
                      </span>
                    </a>
                    <a class='no-link download-link' href="{{ url_for('downloadAlbum', uri=album.alb_id)}}">
                      <span class="btn btn-outline-primary download-button" style='padding: 2px 2px 2px 2px;border: 0px solid #fff;'>
                        <i class="fas fa-arrow-alt-circle-down"></i> Download full album
                      </span>
                    </a>
                  </p>
                  
                </div>

                </td> 
                <td class='text-right'>
                    <p class='alb-count'>{{album.count}}</p>
                    {% if  album.count == 1 %}
                      <p class='alb-count-text'>SONG</p>
                    {% else %}
                      <p class='alb-count-text'>SONGS</p>
                    {% endif %}
                </td>              
              </tr>

            {% endfor %}

        </tbody>
      </table>
</div>

<br>
  

{% endblock %}